

let layer = layui.layer
let form = layui.form

//Demo
// layui.use('form', function(){
//   var form = layui.form;
  
//   //提交
//   form.on('submit(formDemo)', function(data){
//     layer.msg(JSON.stringify(data.field));
//     return false;
//   });
// });
let query = {
    // pagenum: 1, // 是	int	页码值
    // pagesize: 2, // 是	int	每页显示多少条数据
    // cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
    // state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
  page: 1,
  limit:10
};
lieBiao()
function lieBiao() { 
  axios.get(`/ydd_user/list`,  {
      // 发送的数据
      params: query,
  }).then(({ data }) => {
      
  // console.log(data);
  renderLayPage(data.data.count)
  let newArr = data.data.data.map(({ id, username, mobile, sex, password }, i) => { 
    // console.log(i);
    let sex1 = ''
    if (sex === 1) {
     
      sex1 = '男'
    } else {
      sex1 = '女'
    }
    return `
      <tr>
            <td>${i + 1}</td>
            <td> ${id}</td>
            <td>${username}</td>
            <td>${mobile}</td>
            
            <td></td>
            <td id="gender"><span>${sex1}</span></td>
            <td></td>
            <td class="bj">
              <button type="button" data-id="${id}" class="layui-btn layui-btn-xs btn_edit" ><i class="layui-icon">&#xe642;</i></button>
              <button type="button" data-id="${id}" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" ><i class="layui-icon">&#xe640;</i></button>
            </td>
          </tr>
    
    `
  }).join(``)
    

  $(`#list`).html(newArr)
 
})
}


// ======================= 分页 =======================

function renderLayPage(count) {
  layui.use(['laypage', 'layer'], function () {
  // renderLayPage(count)
  var laypage = layui.laypage
  layer = layui.layer;
 laypage.render({
    elem: 'demo7', // 注意，这里的 page-box 是 ID，不用加 # 号
        count, // 数据总数，从服务端得到
        curr: query.page, // 起始页，从query对象中可以获取到
      limit: query.limit, // 每页条数，从query对象中可以获取到
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [1, 2, 3, 5, 8, 10]
   , jump: function (obj,first) {
      
      // console.log(obj.curr)
      // 1.当前页面
    // query.pagenum = obj.curr;
     query.page = obj.curr
     query.limit = obj.limit

    // 修改pagesize的值(每页显示的条数)
    //  query.pagesize = obj.limit;
     if (!first) { 
       lieBiao()
     }
 
    }
  });
})
}







// ======================= 实现删除功能 =======================
$("#list").on("click", ".btn_delete", function () {
    let id = $(this).attr("data-id");
// console.log(id);
    layer.confirm("确定删除?", { icon: 3, title: "提示" }, function (index) {
        // 点击确认按钮,来发送ajax请求实现删除文章
      axios.get("/ydd_user/del?id=" + id).then((res) => {
          // console.log(res);
         

            // 删除文章成功
            layer.msg("删除成功");

            // 当前页面中，如果只有一个删除按钮了，页码 - 1，使其展示上一页数据
            // 解决小bug
            if ($(".btn_delete").length === 1) {
                // 页码最小值为1
                query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1;
            }

            // 发送ajax获取最新的数据
           liebiao();
            layer.close(index);
        });
    });
});

// ============编辑功能================
$(`#list`).on(`click`, `.btn_edit`, function () { 
  const id=$(this).attr(`data-id`)
 
  // 编辑功能
let indexEditForm
// 编辑按钮是动态创建得，需要注册事件委托
let editFormStr = `
    <form id="editForm" class="layui-form" lay-filter="editForm">
    <div  class="biaoDanTop"> 
      <div class="layui-form-item layui-hide  ">
    <label class="layui-form-label">分类名称id</label>
    <div class="layui-input-block">
        <input type="text" name="id" required lay-verify="required" placeholder="Id" autocomplete="off"
        class="layui-input">
    </div>
    </div>
    <!-- 第一行 用户名 -->
    <div class="layui-form-item">
    <label class="layui-form-label "  >用户名</label>
    <div class="layui-input-block">
        <input type="text" class="bianji"  name="username" required lay-verify="required" placeholder="请输入用户名称" autocomplete="off"
        class="layui-input">
    </div>
    </div>
    <!-- 第二行 手机号  -->
    <div class="layui-form-item">
    <label class="layui-form-label  " >手机号</label>
    <div class="layui-input-block">
        <input type="text" class="bianji" name="mobile" required lay-verify="required|number" placeholder="请输入手机号" autocomplete="off"
        class="layui-input">
    </div>
    </div>

    <!-- 第3行 密码  -->
    <div class="layui-form-item">
    <label class="layui-form-label ">密码</label>
    <div class="layui-input-block">
        <input type="text" class="miMa" name="alias"  placeholder="留空表示不修改" autocomplete="off"
        class="layui-input">
    </div>
    </div>
<!-- 第4行 性别 -->
     <div class="layui-form-item" id="xb">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
      
    </div>
  </div>
  <!-- 第5行 上传图片 -->
  <div class="layui-btn-container">
  <label class="layui-form-label test3">用户头像</label>
   <button type="file" name="file " class="layui-btn" id="test3">点击上传</button>
</div>
   
   <!-- 第6行按钮 -->
   <div class="layui-input-block bottom-an" >
    <div class="layui-input-block bottom-angs">
      <button type="button" class="layui-btn layui-btn-primary">取消</button>
       <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="queRen">确认</button>
    </div>
  </div>
   </div>
    </form>
`

  $('#list').on('click', '.btn_edit', function () {
  
    // 获取到数据，填充到修改的表单中
    //接口中需要携带id ==> 给按钮添加自定义属性
    const id = $(this).attr('data-id')
    // console.log(id)

    //发送请求
    // :id 整个替换成具体的id值
    axios.get('/ydd_user/rowInfo?id=' + id).then(({ data: res }) => {
        // console.log(res)
        // 填充表单数据
        // formTest 即 class="Layui-form” 所在元素属性 lay-filter="" 对应的值
        form.val('editForm',res.data)
    })

    // 编辑弹出框
    indexEditForm = layer.open({
        content: editFormStr,
        title:'修改用户', 
      type: 1,
    
        area: ['45%', '400px']
    });
    
    $(`body`).on(`submit`, `#editForm`, function (e) {
      // console.log(`编辑按钮`);
        e.preventDefault()
        let data = $(this).serialize()
        
        axios.post(`/ydd_user/update`, data).then((res) => {
            // console.log(res);

            if (res.data.status !== 200) { 
                return layer.msg(`失败`)
            }
                    // 1关闭编辑弹出层
            layer.close(indexEditForm)
            // 重新获取ajax数据
            lieBiao()
            // 3.提示
            layer.msg(`更新成功!`)
         })
     })
})
})


$(`body`).on(`click`, `.layui-btn-primary`, function
  () { 
   // 1关闭编辑弹出层
            layer.close(indexEditForm)
  })



// ====================新增==================
$(`#three`).on(`click`, function () { 
  console.log(1111111111);
 

 
})
  




// ===============================确认按钮=====================================
$(`body`).on(`submit`, `#queRen`, function (e) { 
  
  console.log(222222222);
 e.preventDefault()
   let data = $(this).serialize()
  console.log(data);
  axios.post(` /ydd_user/update`, data).then((res) => { 
    
     // 1关闭编辑弹出层
  layer.close(indexEditForm)
    // 重新获取ajax数据
  lieBiao()
   // 3.提示
   layer.msg(`修改成功!`)
  })


  
})




